<template>
    <div class="uc-game">
        <div class="uc-board">
            <div class="uc-role"
                 :class="{ xs: board.roles.length > 16, sm: board.roles.length > 9, lg: board.roles.length <= 9, me: r.group === role.group, selected: r.group === role.preVote }"
                 v-for="r in board.roles" @click="doPreVote(r)" @touchstart="doPreVote(r)">
                <div class="uc-role-status">
                    <div class="uc-role-index">{{ r.group + 1 }}</div>
                    <div class="uc-role-label dead" v-if="r.dead">已出局</div>
                    <template v-else>
                        <div class="uc-role-label"
                             v-if="board.stage === common.stages.confirm || board.stage === common.stages.reconfirm"
                             :class="{ [r.status]: true }">{{ common.statusLabel[r.status] }}
                        </div>
                        <template v-else-if="board.stage === common.stages.describe">
                            <div class="uc-role-label described" v-if="board.describer > r.group">已发言</div>
                            <div class="uc-role-label describing" v-else-if="board.describer === r.group">发言中</div>
                            <div class="uc-role-label preparing" v-else-if="board.describer + 1 === r.group">准备中</div>
                            <div class="uc-role-label waiting" v-else>等待中</div>
                        </template>
                        <template v-else-if="board.stage === common.stages.redescribe">
                            <div class="uc-role-label preparing" v-if="board.redescribers.includes(r.group) && board.redescribers.indexOf(r.group) === 0">准备中</div>
                            <div class="uc-role-label waiting" v-else-if="board.redescribers.includes(r.group)">等待中</div>
                            <div class="uc-role-label described" v-else-if="board.revotes.includes(r.group)">已发言</div>
                            <div class="uc-role-label describing" v-else-if="board.describer === r.group">发言中</div>
                            <div class="uc-role-label described" v-else>待投票</div>
                        </template>
                        <div v-else-if="board.stage === common.stages.vote" class="uc-role-label"
                             :class="{ voted: r.vote !== false }">{{ r.vote === false ? '投票中' : '已投票' }}
                        </div>
                        <div v-else class="uc-role-label waiting">等待中</div>
                    </template>
                </div>
                <div class="uc-role-name">{{ r.player.name }}</div>
                <div class="uc-role-votes" v-if="r.votes > 0">
                    <i class="fa fa-fw fa-ticket uc-votes" v-for="i in r.votes"></i>
                </div>
                <div class="uc-tips">
                    <i class="fa fa-fw fa-commenting uc-describing" v-if="!r.dead && (board.stage === common.stages.redescribe || board.stage === common.stages.describe) && board.describer === r.group"></i>
                    <!--<i class="fa fa-fw fa-ticket uc-voting" v-if="!r.dead && board.stage === common.stages.vote && r.vote === false"></i>-->
                    <i class="fa fa-fw fa-check uc-voted" v-if="!r.dead && board.stage === common.stages.vote && r.vote !== false"></i>
                </div>
            </div>
        </div>
        <div class="uc-panel">
            <template v-if="board.stage === common.stages.end">
                <div class="tip-header">经过大家不懈的努力,在此通知您</div>
                <div class="uc-end">游戏结束({{ board.countdown }})</div>
                <div class="uc-winner"><span class="uc-winner-name" :class="board.winType">【{{ common.roleLabel[board.winType] }}】</span>获胜</div>
                <div class="tip-footer">稍候可查看具体的游戏结果</div>
            </template>
            <template v-else-if="role.dead">
                <div class="tip-header">您(<span class="tip-number">{{ role.group + 1 }}号</span>)抽取的<span :class="{ 'tip-role': showRole(role) }">{{ tip(role) }}</span>为:</div>
                <div><div class="uc-dead">已出局</div><div class="uc-word"><div :class="{'uc-role': showRole(role)}">{{ word(role) }}</div></div></div>
                <div class="tip-footer">您已经被其他玩家认定为卧底或白板</div>
                <div class="tip-footer">暂时被投票出局,请耐心等待游戏结果</div>
            </template>
            <template v-else>
                <template v-if="board.stage === common.stages.confirm">
                    <div class="tip-header">您(<span class="tip-number">{{ role.group + 1 }}号</span>)抽取到的<span :class="{ 'tip-role': showRole(role) }">{{ tip(role) }}</span>为:</div>
                    <div class="uc-word"><div :class="{'uc-role': showRole(role)}">{{ word(role) }}</div></div>
                    <div class="uc-choose" v-if="role.type !== common.roles.whiteboard && role.type !== common.roles.accomplice">
                        <template v-if="role.status === common.status.confirming">
                            <div class="btn btn-confirm" @click="doConfirm" @touchstart="doConfirm">
                                <div>同意({{ board.countdown }})</div>
                                <div>这么简单的词,一目了然!</div>
                            </div>
                            <div class="btn btn-deny" @click="doDeny" @touchstart="doDeny">
                                <div>不同意</div>
                                <div>这是啥玩意,没见过的词!</div>
                            </div>
                        </template>
                        <div v-else>{{ common.statusLabel[role.status] }}</div>
                    </div>
                    <div class="tip-footer" v-else>
                        <span v-if="role.status === common.status.confirming">您是{{ tip(role) }}玩家,稍候将自动确认!</span>
                        <span v-else="">您是{{ tip(role) }}玩家,系统已为您自动确认!</span>
                    </div>
                    <div class="tip-footer">请根据您的实际情况选择对应的选项</div>
                </template>
                <template v-if="board.stage === common.stages.reconfirm">
                    <div class="tip-header">部分玩家没有接触过这类词语</div>
                    <div>{{ board.countdown }}</div>
                    <div class="tip-footer">将随机新的词语并重新确认</div>
                </template>
                <template v-if="board.stage === common.stages.starting">
                    <div class="tip-header">大部分玩家接触过这个词语</div>
                    <div>{{ board.countdown }}</div>
                    <div class="tip-footer">游戏即将开始,请做好准备</div>
                </template>
                <template v-if="board.stage === common.stages.describe">
                    <div class="tip-header">您(<span class="tip-number">{{ role.group + 1 }}号</span>)抽取的<span :class="{ 'tip-role': showRole(role) }">{{ tip(role) }}</span>为:</div>
                    <div class="uc-word"><div :class="{'uc-role': showRole(role)}">{{ word(role) }}</div></div>
                    <template v-if="board.describer === role.group">
                        <div v-if="board.countdown >= common.disabled.describe">请发言({{ board.countdown }})</div>
                        <div v-else class="uc-choose">
                            <div class="btn btn-describe-end" @click="doDescribeEnd" @touchstart="doDescribeEnd">
                                <div>发言结束({{ board.countdown }})</div>
                                <div>我要说的就这些了,你们发挥吧!</div>
                            </div>
                        </div>
                    </template>
                    <template v-else="">
                        <div class="tip-footer" v-if="board.describer + 1 === role.group">您即将进行本回合的发言,请做好发言准备</div>
                        <div class="tip-footer" v-else-if="board.describer < role.group">本回合您的发言还未开始,请仔细听取其他玩家的发言</div>
                        <div class="tip-footer" v-else="">您本回合发言已结束,请仔细听取其他玩家的发言</div>
                        <div class="tip-footer" v-if="role.help !== false">{{ role.help + 1 }}号玩家是卧底玩家,请帮助他躲避平民玩家的追杀</div>
                        <div class="tip-footer">稍候请投票选出您认为与你抽取到不同词语的玩家</div>
                    </template>
                </template>
                <template v-if="board.stage === common.stages.redescribing">
                    <div class="tip-header">您(<span class="tip-number">{{ role.group + 1 }}号</span>)抽取的<span :class="{ 'tip-role': showRole(role) }">{{ tip(role) }}</span>为:</div>
                    <div class="uc-word"><div :class="{'uc-role': showRole(role)}">{{ word(role) }}</div></div>
                    <template v-if="board.redescribers.includes(role.group)">
                        <div>准备再发言({{ board.countdown }})</div>
                        <div class="tip-footer">您的得票与其他玩家相同</div>
                        <div class="tip-footer">您将与其他玩家再次发言,并被投票</div>
                    </template>
                    <template v-else>
                        <div>准备再投票({{ board.countdown }})</div>
                        <div class="tip-footer">有多名玩家的票数相同</div>
                        <div class="tip-footer">这些玩家将再次发言,并被投票</div>
                    </template>
                </template>
                <template v-if="board.stage === common.stages.redescribe">
                    <div class="tip-header">您(<span class="tip-number">{{ role.group + 1 }}号</span>)抽取的<span :class="{ 'tip-role': showRole(role) }">{{ tip(role) }}</span>为:</div>
                    <div class="uc-word"><div :class="{'uc-role': showRole(role)}">{{ word(role) }}</div></div>
                    <div class="uc-choose" v-if="board.describer === role.group">
                        <div class="btn btn-describe-end" @click="doDescribeEnd" @touchstart="doDescribeEnd">
                            <div>发言结束({{ board.countdown }})</div>
                            <div>我要说的就这些了,你们发挥吧!</div>
                        </div>
                    </div>
                    <template v-else="">
                        <div class="tip-footer" v-if="board.redescribers[0] === role.group">您即将进行本回合的发言,请做好发言准备</div>
                        <div class="tip-footer" v-else-if="board.redescribers.includes(role.group)">本回合您的发言还未开始</div>
                        <div class="tip-footer" v-else-if="board.revotes.includes(role.group)">您本回合发言已结束</div>
                        <div class="tip-footer" v-else="">本回合得票数相同的玩家将依次发言</div>
                        <div class="tip-footer" v-if="role.help !== false">{{ role.help + 1 }}号玩家是卧底玩家,请帮助他躲避平民玩家的追杀</div>
                        <div class="tip-footer">请仔细听取其他玩家的发言等待重新投票</div>
                    </template>
                </template>
                <template v-if="board.stage === common.stages.vote">
                    <template v-if="role.vote === false">
                        <template v-if="role.preVote !== false">
                            <div class="tip-header">您(<span class="tip-number">{{ role.group + 1 }}号</span>)当前选择的玩家是</div>
                            <div class="tip-number">{{ role.preVote + 1 }}号</div>
                            <div>{{ board.roles[role.preVote].player.name }}</div>
                            <div class="uc-choose">
                                <div class="btn btn-vote" @click="doVote" @touchstart="doVote">
                                    <div>确定({{ board.countdown }})</div>
                                    <div>我确定就是TA了,我们不一样!</div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="tip-header">您(<span class="tip-number">{{ role.group + 1 }}号</span>)当前未选择玩家</div>
                            <div>请选择({{ board.countdown }})</div>
                        </template>
                        <div class="tip-footer landscape">点击左侧区域选择玩家进行投票</div>
                        <div class="tip-footer portrait">点击上方选择选择玩家进行投票</div>
                        <div class="tip-footer">选出您认为与您抽取了不一样词语的玩家</div>
                    </template>
                    <template v-else>
                        <div class="tip-header">您当前投票的玩家是</div>
                        <div class="tip-number">{{ role.vote + 1 }}号</div>
                        <div>{{ board.roles[role.vote].player.name }}</div>
                        <div class="tip-footer">请等待其他玩家投票</div>
                    </template>
                </template>
                <template v-if="board.stage === common.stages.tip">
                    <div class="tip-header">经过大家激烈的投票,在此通知您</div>
                    <div>游戏继续</div>
                    <div class="tip-footer">各身份玩家均未满足获胜条件</div>
                </template>
            </template>
        </div>
    </div>
</template>
<script>
    import {mixin, utils} from 'board-game/client';

    import common from './../common';

    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    let speechRecognition = false;

    export default {
        name: "game",
        mixins: [mixin],
        watch: {
            board: {
                deep: true,
                handler() {
                    if (this.board.describer === this.role.group && this.board.stage === common.stages.describe && this.listener === false) {
                        if (SpeechRecognition) {
                            // speechRecognition = new SpeechRecognition();
                            // // speechRecognition.lang = 'zh-cn';
                            // speechRecognition.continuous = true;
                            // speechRecognition.onresult = (event) => { 
                            //     alert('onresult');
                            //     // alert(event);
                            //     if (event && event.results && event.results.length && event.results[0].length) {
                            //         this.doDescribeEnd({ msg: event.results[0][0].transcript });
                            //     }
                            // }
                            // speechRecognition.onomatch = (event) => {
                            //     alert('onomatch');
                            //     // alert(event);
                            // }
                            // speechRecognition.onerror = (event) => {
                            //     // alert('onerror');
                            //     alert(event.error);
                            // }
                            // speechRecognition.onspeechend = (event) => {
                            //     alert('onspeechend');
                            //     // alert(event);
                            // }
                            // speechRecognition.onspeechstart = (event) => {
                            //     alert('onspeechstart');
                            //     // alert(event);
                            // }
                            // speechRecognition.onsoundend = (event) => {
                            //     alert('onsoundend');
                            //     // alert(event);
                            // }
                            // speechRecognition.onsoundstart = (event) => {
                            //     alert('onsoundstart')
                            //     // alert(event);
                            // }
                            // this.listener = true;
                        }
                    }
                }
            }
        },
        data() {
            return {
                common: common,
                listener: false,
                listening: false,
            }
        },
        mounted() {

        },
        methods: {
            showRole(role) {
                return common.showRole[role.type];
            },
            tip(role) {
                if (this.showRole(role)) {
                    return '身份'
                } else {
                    return '词语'
                }
            },
            word(role) {
                if (this.showRole(role)) {
                    return common.roleLabel[role.type];
                } else {
                    return role.word
                }
            },
            doPreVote(r) {
                if (!this.role.dead && this.board.stage === common.stages.vote) {
                    if (r.group !== this.role.group && !r.dead && (!this.board.revotes.length || this.board.revotes.includes(r.group))) {
                        this.$root.emit.doPreVote(r.group);
                    }
                }
            },
            doVote() {
                if (!this.role.dead) {
                    this.$root.emit.doVote();
                }
            },
            doConfirm() {
                if (!this.role.dead) {
                    this.$root.emit.doConfirm();
                }
            },
            doDeny() {
                if (!this.role.dead) {
                    this.$root.emit.doDeny();
                }
            },
            doDescribeEnd(data) {
                // if (speechRecognition) {
                //     if (this.listening) {
                //         speechRecognition.stop();
                //         speechRecognition = false;
                //         this.listener = false;
                //     } else {
                //         speechRecognition.start();
                //         this.listening = true;
                //     }
                // } else {
                    if (!this.role.dead && this.board.countdown < common.disabled.describe) {
                        this.$root.emit.doDescribeEnd(data);
                    }
                // }
            },
        }
    }
</script>
<style lang="less">
    @keyframes uc-describing {
        from { transform: rotate(0); }
        25% { transform: rotate(-5deg); }
        50% { transform: rotate(0); }
        75% { transform: rotate(5deg); }
        to { transform: rotate(0); }
    }
    @keyframes uc-voting {
        from { padding-top: 0; }
        to { padding-top: 50%; }
    }
</style>
<style lang="less" scoped>
    .uc-game {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .uc-board {
            flex: none;
            width: 100vmin;
            height: 100vmin;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: flex-start;
            align-items: flex-start;
            > .uc-role {
                flex: none;
                border-radius: 15%;
                border: solid white;
                background: darkslategray;
                display: flex;
                flex-direction: column;
                position: relative;
                > .uc-tips {
                    position: absolute;
                    align-self: flex-end;
                    top: 25%;
                    .uc-describing {
                        transform-origin: left bottom;
                        animation: uc-describing 1s infinite linear;
                        font-size: 2em;
                    }
                    .uc-voted {
                        font-size: 2em;
                    }
                    .uc-voting {
                        animation: uc-voting 1s infinite linear;
                        font-size: 2em;
                        overflow: hidden;
                        width: 1.5em;
                        height: 1.5em;
                        line-height: 1.5em;
                    }
                }
                &.me {
                    background: darkgreen;
                }
                &.selected {
                    background: darkblue;
                }
                > .uc-role-status {
                    flex: none;
                    display: flex;
                    flex-direction: row;
                    > .uc-role-index {
                        flex: none;
                        width: 1.5em;
                        height: 1.5em;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: 0.2em;
                        border-radius: 50%;
                        background: white;
                    }
                    > .uc-role-label {
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 0.5em;
                        margin: 0.2em;
                        color: black;
                        background: skyblue;
                        &.dead {
                            background: gray;
                        }
                        &.describing {
                            background: green;
                        }
                        &.waiting {
                            background: lightyellow;
                        }
                        &.confirming {
                            background: lightyellow;
                        }
                        &.confirmed {
                            background: lightgreen;
                        }
                        &.deny {
                            background: red;
                        }
                    }
                }
                > .uc-role-name {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                    flex-wrap: wrap;
                    border-radius: 0.5em;
                    margin: 0.3em;
                    color: black;
                    background: white;
                }
                > .uc-role-votes {
                    position: absolute;
                    align-self: flex-end;
                    bottom: 6%;
                    right: 5%;
                    display: flex;
                    flex-direction: row-reverse;
                    justify-content: flex-start;
                    align-items: center;
                    > i {
                        font-size: 0.8em;
                        margin-left: -0.8em;
                        text-shadow: 0 0 2px white;
                    }
                }
                &.lg {
                    width: 33.33vmin;
                    height: 33.33vmin;
                    border-width: 1vmin;
                    font-size: 5vmin;
                }
                &.sm {
                    width: 25vmin;
                    height: 25vmin;
                    border-width: 0.75vmin;
                    font-size: 4vmin;
                }
                &.xs {
                    width: 20vmin;
                    height: 20vmin;
                    border-width: 0.5vmin;
                    font-size: 3vmin;
                }
            }
        }
        .uc-panel {
            flex: 1;
            align-self: stretch;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            font-size: 3em;
            background: lightgray;
            > div {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                > div {
                    font-size: 0.4em;
                }
                span {
                    display: inline;
                }
            }
            > .tip-header {
                display: inline-block;
                flex: none;
                align-self: flex-start;
                font-size: 0.45em;
                color: orangered;
                padding: 0 1em 1em 1em;
                &:first-of-type {
                    padding: 1em;
                }
                > .tip-number {
                }
                > .tip-role {
                    color: transparent;
                    background: linear-gradient(to bottom, yellowgreen, darkgreen);
                    -webkit-background-clip: text;
                }
            }
            > .tip-number {
                color: darkred;
                font-weight: bold;
            }
            > .tip-footer {
                display: inline-block;
                flex: none;
                align-self: flex-end;
                font-size: 0.3em;
                color: seagreen;
                padding: 1em 1em 0 1em;
                text-align: right;
                > .tip-number {
                    color: darkred;
                    font-weight: bold;
                }
                &:last-of-type {
                    padding: 1em;
                }
            }
            .uc-dead {
                position: absolute;
                color: gray;
                font-weight: bold;
                border: 0.18em solid gray;
                font-size: 0.5em;
                border-radius: 0.5em;
                padding: 0.35em;
                transform: translate(-2em, -0.5em) rotate(-45deg);
            }
            .uc-word {
                font-size: 1.5em;
                color: darkred;
                > .uc-role {
                    font-size: 0.5em;
                    border: 1px solid #303030;
                    border-radius: 0.1em;
                    padding: 0.35em;
                    color: transparent;
                    background: linear-gradient(to top, yellowgreen, white);
                    -webkit-background-clip: text;
                }
            }
            .uc-end {
                font-size: 1em;
            }
            .uc-winner {
                font-size: 1.2em;
                display: inline-block;
                .normal {
                    color: darkslategray;
                }
                .undercover {
                    color: darkred;
                }
                .whiteboard {
                    color: darkslateblue;
                }
            }
            .uc-choose {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 100%;
            }
            .btn {
                font-size: 0.5em;
                border: 2px solid dodgerblue;
                background: linear-gradient(180deg, lightblue, lightblue 50%, skyblue 50%, skyblue);
                border-radius: 0.2em;
                padding: 0.5em;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: green;
                &.disabled {
                    filter: gray(0.5);
                }
                > div:first-of-type {
                    font-weight: bold;
                }
                > div:last-of-type {
                    font-size: 0.5em;
                }
                &.btn-confirm {
                    color: green;
                }
                &.btn-deny {
                    color: red;
                }
            }
        }
    }

    .landscape {
        display: none !important;
    }

    .portrait {
        display: flex !important;
    }

    @media screen and (orientation: landscape) {
        .uc-game {
            flex-direction: row;
        }

        .landscape {
            display: flex !important;
        }

        .portrait {
            display: none !important;
        }
    }
</style>
